<template>
  <div class="login-bg">
    <div class="mask"></div>
    <div class="login-main">
      <!-- 左侧欢迎区 -->
      <div class="login-welcome">
        <div class="welcome-title">汽修</div>
        <div class="welcome-desc">欢迎使用 汽修管理系统</div>
        <ul class="welcome-list">
          <li>➤ 配件进销存</li>
          <li>➤ 移动开单</li>
          <li>➤ 财务记账</li>
          <li>➤ 库存管理</li>
          <li>➤ 汽修工单</li>
        </ul>
      </div>
      <!-- 右侧登录区 -->
      <div class="login-panel">
        <div class="login-panel-title">用户登录</div>
        <div class="login-panel-desc">欢迎登录汽修后台管理系统</div>
        <el-form :model="loginForm" :rules="rules" ref="formRef" label-width="0">
          <el-form-item prop="accountName">
            <el-input v-model="loginForm.accountName" placeholder="请输入账号">
              <template #prefix><el-icon><User /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码">
              <template #prefix><el-icon><Lock /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入验证码" style="width: 60%" />
            <img src="https://dummyimage.com/80x32/cccccc/000000&text=0664" alt="验证码" class="captcha-img" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onLogin" :loading="loading" style="width:100%">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 底部版权 -->
    <div class="copyright-left">© 2020 All Rights Reserved. code51</div>
    <div class="copyright-right">猿码在线<br /><span class="red">http://code51.cn</span></div>
    <div class="lang-switch">英/小</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'

const router = useRouter()
const loginForm = ref({ accountName: '', password: '' })
const loading = ref(false)
const formRef = ref()

const rules = {
  accountName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const onLogin = () => {
  formRef.value.validate(async valid => {
    if (!valid) return
    loading.value = true
    try {
      const res = await axios.post('/carRepair/login', {
        accountName: loginForm.value.accountName,
        password: loginForm.value.password
      })
      if (res.data && res.data.code === 200) {
        localStorage.setItem('user', JSON.stringify(res.data.data))
        await router.push('/admin')
      } else {
        ElMessage.error(res.data.message || '登录失败')
      }
    } catch (e) {
      ElMessage.error('网络错误或服务器异常')
    } finally {
      loading.value = false
    }
  })
}
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  width: 100vw;
  background: url('https://img.js.design/assets/img/65f6e2e2b8b6b6b6b6b6b6b6.jpg') center center/cover no-repeat;
  position: relative;
  overflow: hidden;
}
.mask {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}
.login-main {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-welcome {
  width: 380px;
  min-height: 420px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border-radius: 10px 0 0 10px;
  padding: 50px 40px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
}
.welcome-title {
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 18px;
}
.welcome-desc {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;
}
.welcome-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
}
.welcome-list li {
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.login-panel {
  width: 400px;
  min-height: 420px;
  background: rgba(255,255,255,0.92);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  padding: 40px 40px 30px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-panel-title {
  font-size: 26px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  text-align: center;
}
.login-panel-desc {
  font-size: 15px;
  color: #888;
  margin-bottom: 28px;
  text-align: center;
}
.captcha-img {
  height: 32px;
  width: 80px;
  margin-left: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  vertical-align: middle;
}
.copyright-left {
  position: fixed;
  left: 30px;
  bottom: 18px;
  color: #fff;
  font-size: 15px;
  z-index: 10;
  opacity: 0.85;
}
.copyright-right {
  position: fixed;
  right: 30px;
  bottom: 10px;
  color: #b22222;
  font-size: 18px;
  text-align: right;
  z-index: 10;
  opacity: 0.95;
}
.copyright-right .red {
  color: #b22222;
  font-size: 18px;
}
.lang-switch {
  position: fixed;
  right: 20px;
  top: 10px;
  background: #ff6600;
  color: #fff;
  font-size: 16px;
  border-radius: 0 0 6px 6px;
  padding: 2px 12px;
  z-index: 10;
  opacity: 0.95;
}
</style> 